<template>
	<div class="login1">
		<img class="login-bg" src="../assets/img/login-bg.jpg" />
		<div class='login-top'>欢迎使用有品购</div>
		<div class="login-wrap" v-if="showLogin">
			<h3>登录</h3>
			<input class="login-input" type="text" placeholder="请输入用户名" v-model="username">
			<input class="login-input" type="password" placeholder="请输入密码" v-model="password">
			<button @click="login" class="login-but">登录 </button>
			<span @click="ToRegister">没有账号？马上注册</span>
		</div>

		<div class="register-wrap" v-if="showRegister">
			<h3>注册</h3>
			<input class="login-input" type="text" placeholder="请输入用户名" v-model="newUsername">
			<input class="login-input" type="password" placeholder="请输入密码" v-model="newPassword">
			<button @click="register" class="login-but">注册</button>
			<span @click="ToLogin">已有账号？马上登录</span>
		</div>
		<!-- 	<router-link to="/">
				<el-button class="login-yes" :plain="true" @click="open2">
					登录
				</el-button>
			</router-link>	 -->		
	</div>
</template>

<script>
	import { Indicator } from 'mint-ui';
	import {mapState, mapMutations, mapActions, mapGetters} from 'vuex';
	export default {
		data(){
			return{
				showLogin: false,
				showRegister: true,
				showTishi: false,
				tishi: '',
				username: '',
				password: '',
				newUsername: '',
				newPassword: ''
			}
		},
		computed:{
		 	...mapState({
		 		denglu : (state,getters)=>{
		 			 
		 			 return state.rng.denglu;
		 		 }
		 	 })
		 	 
		},
		mounted(){
			if(this.denglu !== "请登录"){
				this.$router.push('/')
			}
		},		
	    methods: {
			...mapActions({
				
				alter : 'rng/alter'
				
			}),			
			register(){
				if (!this.newUsername) {
					 this.$message({
						message: '请输入用户名',
						type: 'warning',
					    duration:800
					 });
					return;
				}
				if (!this.newPassword) {
					this.$message({
						message: '请输入密码',
						type: 'warning',
						duration:800
					})
					return;
				}
			var op = JSON.parse(localStorage.getItem("reg") || {"key":"value"});
			for(var loginOP in op){			
				if(this.newUsername === loginOP){
					this.$message({
						message: '用户名已被注册',
						type: 'error',
						duration:2000
					});
					return;
				}else{
					op[this.newUsername] = this.newPassword;
					localStorage.setItem("reg",JSON.stringify(op));
					this.showLogin = true;
					this.showRegister = false;
					this.newPassword = '';
					this.newUsername = '';
					this.$message({
						message: '恭喜你，注册成功',
						type: 'success',
						duration:1000
					});
					return;
				}
			} 
		},
			login() {
				var loginA =JSON.parse(localStorage.getItem("reg"));
				if(this.username in loginA){
					if(this.password === loginA[this.username]){
						this.$message({
							message: '登录成功',
							type: 'success',
							duration:1000
						});
						var deng = this.username;
						this.alter(deng)
						this.$router.push('/');
						return;
					}else{
						this.$message({
							message: '用户名和密码不匹配',
							type: 'error',
							duration:1000
						});
						return;
					}
				}else{
					this.$message({
						message: '用户名不存在',
						type: 'warning',
						duration:3000
					});
					return;
				}
				if (!this.username) {
					this.$message({
						message: '请输入用户名',
						type: 'warning',
						duration:800
					});
					return;
				if (!this.password) {
					this.$message({
						message: '请输入密码',
						type: 'warning',
						duration:800
					})
					return;
				}
			}
			},
			ToRegister(){
				this.showRegister = !this.showRegister;
				this.showLogin = !this.showLogin;
			},
			ToLogin(){
				this.showRegister = !this.showRegister;
				this.showLogin = !this.showLogin;
			}
		}	
}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;

	}
	.login1{text-align: center;}
	.login-top{
		font-size: 0.6rem;
		position: absolute;
		top: 3.4rem;
		left: 3.4rem;
		border-left: 5px solid #74ebd5;
		border-right: 5px solid #e0c3fd;
	}
	.login-bg{
		width: 100%;
		height: 100%;
		background: #fff;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -123;
		opacity: 0.6;
	}
	.login-wrap{
		text-align:center;
		position: absolute;
		top: 6rem;
		left: 2rem;
	}
	.register-wrap{
		text-align:center;
		position: absolute;
		top: 6rem;
		left: 2rem;
	}
		
	.login-input{
		display:block; 
		width:250px; 
		height:40px; 
		line-height:40px; 
		margin:0 auto; 
		margin-bottom: 10px; 
		outline:none; 
		border:1px solid #888; 
		padding:10px; 
		box-sizing:border-box;
	}
	p{color:red;}
	.login-but{
		display:block; 
		width:250px; 
		height:40px; 
		line-height: 40px; 
		margin:0 auto; 
		border:none; 
		background-color:#41b883; 
		color:#fff; 
		font-size:16px; 
		margin-bottom:5px;
	}
	span{cursor:pointer;}
	span:hover{color:#41b883;}
</style>
